<template>
	<view class="air-container">
		<view class="chart-box box">
			<uni-datetime-picker  style="width: 80%;" v-model="range" type="daterange" @change="changeDate" />
			<echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
		</view>
		<view class="air-list box">
			<uni-list>
				<view class="list-header">
					<view style="width: 20%;">序号</view>
					<view style="width: 50%;">时间</view>
					<view style="width: 30%;text-align: center;">监测值</view>
				</view>
				<template v-if="tableData.length > 0">
					<uni-list-item style="height: 100rpx;" v-for="(item,index) in tableData" :key="index">
						<template v-slot:header>
							<view class="air-index" style="width: 20%;">
								{{index + 1}}
							</view>
						</template>
						<template v-slot:body>
							<view class="air-time" style="width: 50%;">
								{{item.newestTime}}
							</view>
						</template>
						<template v-slot:footer>
							<view class="air-tem" style="width: 30%;">
								{{item.newestData}}
							</view>
						</template>
					</uni-list-item>
				</template>
				<view class="no-data" v-else>
					暂无数据
				</view>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import echarts from '../../components/echarts-uniapp/echarts-uniapp.vue'
	import {obtainDeviceData,getDataDetailInfo} from '../../untils/api.js'
	export default {
		components: {
			echarts
		},
		data() {
			return {
				range:'',
				option:{},
				airList:[],
				options:{},
				tableData:[]
			}
		},
		methods:{
			getDateSevenDaysAgo() {
				const today = new Date(); // 获取当前日期
			    const sevenDaysAgo = new Date(today); // 复制当前日期
			    sevenDaysAgo.setDate(today.getDate() - 7); // 设置为前第七天
				const year = today.getFullYear(); // 获取年份
				const month = String(today.getMonth() + 1).padStart(2, '0'); // 获取月份（补零）
				const day = String(today.getDate()).padStart(2, '0'); // 获取日期（补零）
								
				// 格式化为 YYYY-MM-DD
				const currDate= `${year}-${month}-${day}`;
			
			    // 格式化为 YYYY-MM-DD
			    const formattedDate = sevenDaysAgo.toISOString().split('T')[0];
			    return [formattedDate,currDate];
			},
			changeDate() {
				this.initChart(this.options)
			},
			async initChart(options) {
				this.option = {}
				uni.showLoading({
					title:'加载中',
					mask: true, // 是否显示透明蒙层，防止触摸穿透
				})
				const params = {
					circuit:options.circuit,
					equipmentCode:options.equipmentCode,
					startingTime:this.range[0],
					endTime:this.range[1],
				}
				const res = await getDataDetailInfo(params)
				this.tableData = res.data
				uni.hideLoading()
				const chartData = res.data.map(item => item.newestData)
				const chartTime = res.data.map(item => item.newestTime)
				let title = {}
				if(chartData.length > 0) {
					title =  {
						text: options.name,
						textStyle: {
							fontSize: 14 // 设置标题文字的大小为24
						},
					}
				}else {
					title = {
						text: '暂无数据',
						left: 'center',
						top: 'middle',
						textStyle: {
							color: '#A1A3A5',
							fontSize: 16
						},
					}
				}
				this.option =  {
					title: title,
					grid: {
					        // 调整图表的位置和大小，top 表示图表顶部与容器顶部的距离
					        top: '15%', 
					        // 其他 grid 属性，如 left、right、bottom、containLabel 等可根据需要设置
					        left: '3%',
					        right: '4%',
					        bottom: '15%',
					        containLabel: true
					      },
					xAxis: {
						show:chartData.length > 0 ? true : false,
						type: 'category',
						data: chartTime,
					},
					yAxis: {
						show:chartData.length > 0 ? true : false,
						type: 'value',
						axisLabel: {
							showMinLabel: true, // 显示最小值标签
							showMaxLabel: true, // 显示最大值标签
							interval: 'auto' // 自动调整间隔
						}
					},
					series: [{
						data: chartData,
						type: 'line',
						color: '#43C722'
					}]
				};
			},
		},
		onLoad(options) {
			this.options = options
			this.range = this.getDateSevenDaysAgo()
			this.initChart(options)
		}
	}
</script>

<style lang="scss" scoped>
	.air-container {
		height: 100%;
		overflow: hidden;
		background-color: #f4f5f5;
		.chart-box {
			margin-top: 18rpx;
			width: 710rpx;
			height: 460rpx;
		}
		.air-list {
			overflow-y: auto;
			width: 710rpx;
			height: 738rpx;
			margin-top: 18rpx;
			font-weight: 400;
			font-size: 30rpx;
			.list-header {
				line-height: 70rpx;
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #929496;
				padding:0 24rpx;
			}
			::v-deep .uni-list-item {
				height: 100rpx;
			}
			.air-index {
				color: #929496;
			}
			.air-time {
				
				color: #181D21;
			}
			.air-tem {
				text-align: center;
				font-weight: 600;
			}
		}
	}
	::v-deep .uni-date-x--border {
		border-radius: 20px;
		overflow: hidden;
	}
	.no-data {
		height: 100%;
		width: 100%;
		display: flex;
		color: #A1A3A5;
		height: 668rpx;
		justify-content: center;
		align-items: center;
	}
</style>